<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>薪酬列表</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css">
</head>
<style>
    body {
        margin: 0;
        font-family: Arial, sans-serif;
    }

    /* 导航栏样式 */
    .navbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background-color: #333;
        padding: 10px 20px;
        color: white;
    }

    .navbar .logo img {
        height: 40px;
    }

    .navbar .system-name {
        flex: 1;
        text-align: center;
        font-size: 24px;
        font-weight: bold;
    }

    .navbar .titles a {
        text-decoration: none;
        color: white;
        font-weight: bold;
    }

    .navbar .titles a:hover {
        text-decoration: underline;
    }

    /* 页面布局 */
    .main-container {
        display: flex;
        height: calc(100vh - 60px); /* 除去导航栏的高度 */
    }

    /* 左侧垂直菜单样式 */
    .sidebar {
        width: 200px;
        border-right: 1px solid #ccc;
        background-color: #f9f9f9;
        padding: 10px;
        box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
    }

    .menu-item {
        position: relative;
        cursor: pointer;
        padding: 10px;
        border-bottom: 1px solid #eee;
    }

    .menu-item:hover {
        background-color: #e0e0e0;
    }

    .menu-item:hover::after {
        content: attr(data-tooltip);
        position: absolute;
        left: 100%;
        top: 50%;
        transform: translateY(-50%);
        background-color: #333;
        color: white;
        padding: 5px 10px;
        border-radius: 4px;
        white-space: nowrap;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    }

    .submenu {
        display: none;
        background-color: #fff;
        padding-left: 20px;
        margin-top: 5px;
        border-left: 2px solid #ccc;
    }

    .submenu a {
        display: block;
        padding: 5px 0;
        color: #333;
        text-decoration: none;
    }

    .submenu a:hover {
        text-decoration: underline;
    }

    .menu-item.active .submenu {
        display: block;
    }

    /* 右侧内容框样式 */
    .content {
        flex: 1;
        padding: 20px;
        background-color: #fff;
        overflow-y: auto;
        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
    }

    .content h1 {
        margin-top: 0;
    }

    /* 表单样式 */
    .form-container {
        max-width: 800px;
        margin: 0 auto;
        background: white;
        padding: 20px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        border-radius: 8px;
    }

    .form-container h1 {
        text-align: center;
    }

    .form-group {
        margin-bottom: 15px;
    }

    .form-group label {
        display: block;
        margin-bottom: 5px;
        font-weight: bold;
    }

    .form-group input, .form-group select, .form-group textarea {
        width: 100%;
        padding: 10px;
        border: 1px solid #ddd;
        border-radius: 4px;
        font-size: 14px;
    }

    .form-group textarea {
        resize: vertical;
    }

    .form-actions {
        text-align: center;
        margin-top: 20px;
    }

    .form-actions button {
        padding: 10px 20px;
        font-size: 16px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
    }

    .form-actions .btn-submit {
        background-color: #4CAF50;
        color: white;
    }

    .form-actions .btn-reset {
        background-color: #f44336;
        color: white;
        margin-left: 10px;
    }
</style>
<!-- 顶部导航栏 -->
<div class="navbar">
    <div class="logo">
        <img src="/image/校徽.png" alt="图标">
    </div>
    <div class="system-name">人力资源管理系统</div>
    <div class="titles">
        <a href="index_jingli.jsp">首页</a>
        <a href="humanQuery">关于</a>
        <a href="#contact">联系我们</a>
    </div>
</div>

<!-- 页面主体布局 -->
<div class="main-container">
    <!-- 左侧垂直菜单 -->
    <div class="sidebar">
        <div class="menu-item" data-tooltip="人力资源管理模块">
            人力资源管理模块
            <div class="submenu">
                <a href="humanAdd_jingli.jsp">添加档案</a>
                <a href="humanQuery">档案查询和管理</a>
            </div>
        </div>
        <div class="menu-item" data-tooltip="管理薪酬">薪酬管理模块
            <div class="submenu">

                <a href="salaryQuery.jsp">薪酬标准列表</a>
                <a href="hrsalary.jsp.jsp">员工薪酬列表</a>
            </div></div>

    </div>
<body>
<div class="container">
    <h2 class="mt-4">薪酬列表</h2>
    <table class="table table-bordered mt-3">
        <thead>
        <tr>
            <th>姓名</th>
            <th>薪酬标准ID</th>
            <th>基本工资</th>
            <th>补助</th>
            <th>养老保险</th>
            <th>失业保险</th>
            <th>医疗保险</th>
            <th>住房公积金</th>
            <th>奖励金</th>
            <th>扣除金</th>
            <th>个人薪酬</th>
        </tr>
        </thead>
        <tbody id="salary-table-body">
        <!-- 数据行会通过 JavaScript 动态填充 -->
        </tbody>
    </table>

    <!-- 提交按钮 -->
    <button class="btn btn-primary mt-4" id="submit-btn">提交</button>
</div>

<script>
    window.onload = function () {
        fetch("api/salaries/")  // 获取数据
            .then(response => response.json())  // 获取JSON格式的数据
            .then(data => {
                console.log(data.data);  // 打印返回的完整数据结构，确认是否有name字段

                // 获取表格的tbody元素
                let tableBody = document.getElementById('salary-table-body');

                // 清空表格内容（避免重复渲染）
                tableBody.innerHTML = '';

                // 渲染数据到表格
                data.data.forEach(salary => {
                    console.log(salary.name);  // 确认 name 字段是否存在

                    // 创建一行
                    let row = document.createElement('tr');

                    // 创建列数据
                    let columns = [
                        { value: salary.name, readonly: true },  // 姓名
                        { value: salary.salary_id, readonly: true },
                        { value: salary.total_salary, readonly: true },
                        { value: salary.allowance, readonly: true },
                        { value: salary.pension_insurance, readonly: true },
                        { value: salary.unemployment_insurance, readonly: true },
                        { value: salary.medical_insurance, readonly: true },
                        { value: salary.housing_fund, readonly: true },
                        { value: salary.bonus, readonly: false, dataField: "bonus", dataId: salary.salary_id },
                        { value: salary.dock, readonly: false, dataField: "dock", dataId: salary.salary_id },
                        { value: salary.hr_salary, readonly: true }
                    ];

                    // 为每一列创建对应的input框
                    columns.forEach(column => {
                        let cell = document.createElement('td');
                        let input = document.createElement('input');
                        input.type = "number";  // 统一使用数字输入框
                        input.classList.add("form-control");

                        // 设置读取和编辑状态
                        input.value = column.value;
                        input.readOnly = column.readonly;

                        // 为奖励金和扣除金添加额外属性
                        if (!column.readonly) {
                            input.setAttribute('data-id', column.dataId);
                            input.setAttribute('data-field', column.dataField);
                        }

                        // 将input添加到当前单元格
                        cell.appendChild(input);
                        row.appendChild(cell);
                    });

                    // 将新行添加到tbody中
                    tableBody.appendChild(row);
                });

                // 为“奖励金”和“扣除金”添加事件监听
                tableBody.addEventListener('input', function(event) {
                    const target = event.target;
                    if (target.tagName.toLowerCase() === 'input') {
                        const salaryId = target.getAttribute('data-id');
                        const field = target.getAttribute('data-field');
                        const value = parseFloat(target.value) || 0;  // 转为数字，若为空则为 0

                        // 获取所在行的所有输入框
                        const row = target.closest('tr');
                        const basicSalaryInput = row.querySelector('input[type="number"]:nth-child(3)');
                        const bonusInput = row.querySelector('input[type="number"]:nth-child(9)');
                        const dockInput = row.querySelector('input[type="number"]:nth-child(10)');
                        const hrSalaryInput = row.querySelector('input[type="number"]:nth-child(11)');

                        // 获取基本工资、奖励金和扣除金
                        const basicSalary = parseFloat(basicSalaryInput.value) || 0;
                        const bonus = parseFloat(bonusInput.value) || 0;
                        const dock = parseFloat(dockInput.value) || 0;

                        // 计算个人薪酬
                        const hrSalary = basicSalary + bonus - dock;

                        // 更新个人薪酬输入框的值
                        hrSalaryInput.value = hrSalary.toFixed(2);  // 保留两位小数
                    }
                });

                // 为提交按钮添加事件监听
                document.getElementById('submit-btn').addEventListener('click', function () {
                    const updatedData = [];

                    // 获取所有表格行的数据
                    const rows = tableBody.getElementsByTagName('tr');
                    Array.from(rows).forEach(row => {
                        const cells = row.getElementsByTagName('td');
                        const name = cells[0].querySelector('input').value;  // 获取姓名
                        const salaryId = parseInt(cells[1].querySelector('input').value);  // 获取薪酬标准ID
                        const totalSalary = parseFloat(cells[2].querySelector('input').value);  // 获取基本工资
                        const allowance = parseFloat(cells[3].querySelector('input').value);  // 获取补助
                        const pensionInsurance = parseFloat(cells[4].querySelector('input').value);  // 获取养老保险
                        const unemploymentInsurance = parseFloat(cells[5].querySelector('input').value);  // 获取失业保险
                        const medicalInsurance = parseFloat(cells[6].querySelector('input').value);  // 获取医疗保险
                        const housingFund = parseFloat(cells[7].querySelector('input').value);  // 获取住房公积金
                        const bonus = parseFloat(cells[8].querySelector('input').value);  // 获取奖励金
                        const dock = parseFloat(cells[9].querySelector('input').value);  // 获取扣除金
                        const hrSalary = parseFloat(cells[10].querySelector('input').value);  // 获取个人薪酬

                        updatedData.push({
                            name: name,
                            salary_id: salaryId,
                            total_salary: totalSalary,
                            allowance: allowance,
                            pensionInsurance: pensionInsurance,
                            unemploymentInsurance: unemploymentInsurance,
                            medicalInsurance: medicalInsurance,
                            housing_fund: housingFund,
                            bonus: bonus,
                            dock: dock,
                            hrSalary: hrSalary
                        });
                    });

                    // 将数据提交到后端
                    fetch('/department/abcd', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json'
                        },
                        body: JSON.stringify(updatedData)
                    })
                        .then(response => response.json())
                        .then(data => {
                            if (data.code === 1) {
                                alert('提交成功');
                            } else {
                                alert('提交失败: ' + data.msg);
                            }
                        })
                        .catch(error => {
                            console.error('提交失败', error);
                            alert('提交失败');
                        });
                });
            });
    };

    // JavaScript 实现下拉菜单功能
    document.querySelectorAll('.menu-item').forEach(item => {
        item.addEventListener('click', () => {
            // 切换 active 类，控制子菜单显示/隐藏
            item.classList.toggle('active');
        });
    });
</script>
</body>
</html>